/* pages/shoping/shoping.wxss */
.shop_site{
    padding-bottom: 90rpx;
    .site_1{
        padding: 20rpx;
        button{
            font-size: 36rpx;
        }
    }
    .site_2{
        display: flex;
        padding:20rpx 20rpx 40rpx 20rpx;
        font-size: 32rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .site_left{
            flex: 5;
        }
        .site_right{
            flex: 3;
           text-align: right;
        }
    }
    .shoping{
       .shoping_1{
          padding: 20rpx 10rpx;
           font-size: 36rpx;
           color: var(--publicColor);
           border-top: 4rpx solid var(--publicColor);
           border-bottom: 4rpx solid var(--publicColor);
       }
       .shoping_list{
           display: flex;
           justify-content: space-between;
           border-bottom: 2rpx solid #ccc;
           padding: 20rpx;
           .list_check{
               flex: 1;
               display: flex;
               justify-content: center;
               align-items: center;
           }
           .list_1{
               flex: 2;
               display: flex;
               justify-content: center;
               align-items: center;
               image{
                 width: 80%;
               }
           }
           .list_2{ 
               display: flex;
              flex-direction: column;
              justify-content: space-around;
               flex: 5;
               .list_2_text{
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                 
               }
               .list_2_rightBottom{
                   display: flex;
                   justify-content: space-between;
                   .rightBottom_price{
                      color: var(--publicColor);
                      font-size: 34rpx;
                   }
                   .rightBottom_count{
                       display: flex;
                      
                       .count_1{
                           width: 60rpx;
                           height: 50rpx;
                           font-size: 38rpx;
                           display: flex;
                           justify-content: center;
                           align-items: center;
                           border: 2rpx solid #ccc;
                       }
                       .count_2{
                        width: 80rpx;
                        height: 50rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-top: 2rpx solid #ccc;
                        border-bottom: 2rpx solid #ccc;
                       }
                   }
               }
           }
       }
    }
    .shopHint{
      width: 400rpx;
      margin: 80rpx auto;
      text-align: center;
      color: #ccc;
      .hint_text{
        font-size: 32rpx;
        padding: 10rpx 0;
      }
      navigator{
          padding: 20rpx 0;
          color: #fff;
          background-color: var(--publicColor);
      }
      image{
          width: 100%;
          height: 100%;
      }
       
    }
}
.shoping_btn{
    width: 100%;
    height: 90rpx;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    background: #fff;
    border-top: 2rpx solid #ccc;
    .btn_check{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20rpx;
        checkbox-group{
            checkbox{
            }
        }
        text{
          font-size: 28rpx;
        }
    }
    .shoping_pirce{
        display: flex;
        font-size: 28rpx;
        .pirce_all{
            padding-right:20rpx ;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .pirce_1{
               text{
                   color: var(--publicColor);
                  font-weight: 600;
               }
            }
            .pirce_2{
               text-align: right;
            }
        }
        .close_btn{
          padding: 10rpx 70rpx;
          display: flex;
          align-items: center;
          color: #fff;
          font-size: 32rpx;
          font-weight: 600;
          background-color: var(--publicColor);
        }
    }
  
}
 //    自定义CheckBox样式
            /* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
    border-radius: 50%;/* 圆角 */
    width: 40rpx; /* 背景的宽 */
    height: 40rpx; /* 背景的高 */
  }
  /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    border: none;
    background: var(--publicColor);
  }
  /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
  checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    border-radius: 50%;/* 圆角 */
    width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
    height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
    line-height: 40rpx;
    text-align: center;
    font-size:30rpx; /* 对勾大小 30rpx */
    color:#fff; /* 对勾颜色 白色 */
    background: transparent;
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
  }